<template>
	<view class="health-record">
		<!-- 返回按钮 -->
		<view class="back-btn" @click="handleBack">
			<image class="back-icon" src="/static/mine/right-black.png"></image>
		</view>

		<view class="form-container">
			<!-- 基本信息 -->
			<view class="form-section">
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input" type="text" v-model="formData.nickName" placeholder="请输入姓名" />
				</view>
				<view class="form-item">
					<text class="label">性别</text>
					<radio-group class="radio-group" @change="handleGenderChange">
						<label class="radio-label">
							<radio value="1" :checked="formData.gender === '1'" />男
						</label>
						<label class="radio-label">
							<radio value="2" :checked="formData.gender === '2'" />女
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">出生年月</text>
					<picker class="picker" mode="date" :value="formData.dateOfBirth" start="1900-01-01" end="2024-12-31"
						@change="handleBirthDateChange">
						<view class="picker-value">
							{{ formData.dateOfBirth || '请选择出生年月' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">联系电话</text>
					<input class="input" type="number" v-model="formData.phone" placeholder="请输入联系电话" maxlength="11" />
				</view>
			</view>

			<!-- 健康信息 -->
			<view class="form-section">
				<view class="form-item">
					<text class="label">身高(cm)</text>
					<input class="input" type="number" v-model="formData.height" placeholder="请输入身高" />
				</view>
				<view class="form-item">
					<text class="label">体重(kg)</text>
					<input class="input" type="number" v-model="formData.weight" placeholder="请输入体重" />
				</view>
				<view class="form-item">
					<text class="label">血型</text>
					<picker class="picker" :value="bloodTypeIndex" :range="bloodTypes" @change="handleBloodTypeChange">
						<view class="picker-value">
							{{ formData.bloodType || '请选择血型' }}
						</view>
					</picker>
				</view>
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" @click="handleSubmit">保存信息</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		getHealthRecordInfo,submitHealthRecordInfo
	} from '../../../api/mine/healthRecord.js'
	const receivedData = ref('')

	// 表单数据
	const formData = reactive({
		nickName: '',
		gender: '1',
		dateOfBirth: '',
		phone: '',
		height: '',
		weight: '',
		bloodType: ''
	});

	// 状态栏高度
	const statusBarHeight = ref(0);

	onMounted(() => {
		//根据头部导航 增加间距
		const systemInfo = uni.getSystemInfoSync();
		// statusBarHeight.value = systemInfo.statusBarHeight + 60; // 额外增加 20px 间距
		receivedData.value = uni.getStorageSync('shareData');
	});

	// 血型选项
	const bloodTypes = ['A型', 'B型', 'AB型', 'O型'];
	const bloodTypeIndex = ref(0);

	// 处理性别选择
	const handleGenderChange = (e) => {
		formData.gender = e.detail.value;
	};

	// 处理血型选择
	const handleBloodTypeChange = (e) => {
		bloodTypeIndex.value = e.detail.value;
		formData.bloodType = bloodTypes[e.detail.value];
	};

	// 处理出生年月选择
	const handleBirthDateChange = (e) => {
		formData.dateOfBirth = e.detail.value;
	};

	// 返回上一页
	const handleBack = () => {
		uni.navigateBack();
	};

	// 表单验证
	const validateForm = () => {
		//姓名检验
		if (!formData.nickName) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			});
			return false;
		}
		//出生年月检验
		if (!formData.dateOfBirth) {
			uni.showToast
			({	title: '请选择出生年月',
				icon: 'none'
			});
			return false;
		}
		//电话号码检验
		if (!formData.phone) {
			uni.showToast({
				title: '请输入联系电话',
				icon: 'none'
			});
			return false;
		}
		// 验证手机号格式
		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(formData.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return false;
		}
		//身高检验
		if (!formData.height) {
			uni.showToast({
				title: '请输入身高',
				icon: 'none'
			});
			return false;
		}
		//体重检验
		if (!formData.weight) {
			uni.showToast({
				title: '请输入体重',
				icon: 'none'
			});
			return false;
		}
		//血型检验
		if (!formData.bloodType) {
			uni.showToast({
				title: '请选择血型',
				icon: 'none'
			});
			return false;
		}
		return true;
	};

	// 提交表单
	const handleSubmit = () => {
		if (!validateForm()) return;
		try {
			// 向后端提交信息
			submitHealthRecordInfo(formData).then(res => {
					console.log(res, '发送数据')
			}).catch(err => {
				console.log(err, '发送失败')
			})

			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
			// 返回上一页
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} catch (error) {
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			});
		}
	};
	//向后端发送请求
	getHealthRecordInfo().then(res => {
		if (res.code === 200) {
			console.log(res, '后端获取的值')
			uni.setStorageSync('shareData', res.nicknickName, res.dataOfBirth, res.phone, res.height, res.weight, res.bloodType)
		   Object.assign(formData,res.data);
		   console.log(formData);
		}
	}).catch(err => {
		console.log(err, '后端获取失败')
	})
</script>

<style scoped>
	.health-record {
		min-height: 100vh;
		/* 更柔和的背景色 */
		/* background-color: #f0f5ff; */
		padding: 60rpx 20rpx ;
	}
	/* 返回按钮 */
	.back-btn {
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
	}
	
	.back-icon {
		width: 60rpx;
		height: 60rpx;
	}
	
	.back-btn:hover {
		/* 悬停时背景加深 */
		background-color: rgba(0, 122, 255, 0.2);
		transform: scale(1.1);
	}

	.form-container {
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx;
		margin-top:20rpx;
		/* 更明显的阴影 */
		box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.15);
	}

	.section-title {
		font-size: 36rpx;
		color: #0056b3;
		margin-bottom: 30rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.label {
		display: block;
		margin-bottom: 15rpx;
		font-size: 30rpx;
		color: #0056b3;
		font-weight: 500;
	}

	.input {
		width: 90%;
		height: 100rpx;
		background-color: #f8faff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		font-size: 30rpx;
		border: 2rpx solid #e0e8ff;
		transition: all 0.3s;
	}

	.input:focus {
		border-color: #007AFF;
		box-shadow: 0 0 12rpx rgba(0, 122, 255, 0.2);
	}

	.radio-group {
		display: flex;
		gap: 60rpx;
	}

	.radio-label {
		display: flex;
		align-items: center;
		gap: 15rpx;
		font-size: 30rpx;
		color: #0056b3;
	}

	.picker-value {
		height: 100rpx;
		background-color: #f8faff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		color: #007AFF;
		border: 2rpx solid #e0e8ff;
		transition: all 0.3s;
	}

	.picker-value:active {
		border-color: #007AFF;
		box-shadow: 0 0 12rpx rgba(0, 122, 255, 0.2);
	}

	.submit-btn {
		margin-top: 60rpx;
		background: linear-gradient(45deg, #007AFF, #0056b3);
		color: #fff;
		border-radius: 16rpx;
		font-size: 36rpx;
		height: 110rpx;
		line-height: 110rpx;
		box-shadow: 0 12rpx 24rpx rgba(0, 122, 255, 0.3);
		transition: all 0.3s;
	}

	.submit-btn:active {
		transform: translateY(4rpx);
		box-shadow: 0 6rpx 12rpx rgba(0, 122, 255, 0.3);
	}
</style>